<template>
  <w-modal ref="WModal" :title="model ? '修改Banner' : '添加Banner'" :success-func="successFunc">
    <template v-slot:default>
      <a-form-item label="标题">
        <a-input
          v-decorator="['title', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.name : '' }]"
          placeholder="请填写标题..."
        />
      </a-form-item>
      <a-form-item label="说明">
        <a-input
          v-decorator="['detail', { rules: [], initialValue: model ? model.detail : '' }]"
          placeholder="请填写说明..."
        />
      </a-form-item>
      <a-form-item label="索引">
        <a-select
          v-decorator="['index', { rules: [], initialValue: model ? model.index : 0 }]"
          placeholder="请填写说明..."
        >
          <a-select-option v-for="item in 10" :key="item" :value="item - 1">
            {{ item - 1 }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="跳转">
        <a-input
          v-decorator="['switch', { rules: [], initialValue: model ? model.switch : '' }]"
          placeholder="请填写跳转地址..."
        />
      </a-form-item>
      <a-form-item label="图片" prop="pic">
        <w-up-image ref="WUpImage" :souce-url="pic" />
      </a-form-item>
    </template>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WModal, { ModalFormComType } from '@/components/global/modal/form'
import WUpImage, { OssImageUpType } from '@/components/global/imageUp/oss'
import { Admin } from '@/config/api'
import Banner from '@/models/banner'

@Component({
  name: 'ComAdminWebBannerAdd',
  components: {
    WModal,
    WUpImage
  }
})
export default class ComAdminWebBannerAdd extends Vue {
  model: Banner | null = null;
  pic = '';

  show (model?: Banner) {
    this.model = model || null
    this.pic = model ? model.pic : '';
    (this.$refs.WModal as ModalFormComType).show()
  }

  async successFunc (values: any) {
    this.pic = await (this.$refs.WUpImage as OssImageUpType).upImage(true)
    const method = this.model ? '$put' : '$post'
    const url = this.model
      ? `${Admin.banner.update}${this.model._id}`
      : Admin.banner.create
    await this.$wAxios[method](url, {
      ...values,
      pic: this.pic
    })
    this.$emit('reload')
  }
}
</script>

<style scoped></style>
